const ClearColor = "#000000"
const canvas = document.getElementById("c")
const ctx = canvas.getContext("2d")
const bg = document.getElementById('bg')
// ctx.clearRect(0, 0, canvas.width, canvas.height);
// ctx.fillStyle = 'black';

const juzi = ["@bg file='rock.jpg' ","句子2"]

ctx.fillRect(0, 0, canvas.width, canvas.height);

const dialog_text_y = 530
var dialog = {"clicks":0}

canvas.addEventListener('click',function(event)
{

    var each = juzi[dialog.clicks]//to_token(juzi[dialog.clicks])
    if(each.startsWith("@"))
        {
            var t = to_token(each)
            if(t.command == "bg")
            {
                // console.log(t.params.file)
                bg.src = "assets/" + t.params.file
                // ctx.drawImage(bg,0,0)
            }
        }
    dialog.drawText(each)
    dialog.clicks +=1
})
dialog.reDraw = function()
{
    ctx.fillStyle = 'orange'
    ctx.fillRect(0,500,canvas.width,200)
}

dialog.drawText = function(p_txt)
{
    ctx.clearRect(0,500,canvas.width,200)
    dialog.reDraw()
    ctx.font = '20px Arial';
    ctx.fillStyle = 'blue';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(p_txt,100,dialog_text_y)
}

function to_token(pstr)
{
    const parts = pstr.split(' ');
    const command = parts[0].substring(1);
    const params = {};
    parts.slice(1).forEach((part) => {
      const [key, value] = part.split('=');
      params[key] = value;
    });
    var result = {}
    result.command = command
    result.params = params
    return result
}
dialog.reDraw()
